<template>
  <div id="app">
    <Child v-for="(item,index) in data" :key="index" :item="item" @next="next" @prev="prev"></Child>
    <footer>
      总价:<span>{{totalPrice}}</span>
      数量:<span>{{aDouble}}</span>
    </footer>
  </div>
</template>

<script>
import Child from './components/HelloWorld'
import axios from 'axios'

export default {
  name: 'App',
  components: {
    Child
  },
  data(){
    return {
      data:[],
    }
  },
  created(){
    axios.get("/list").then((res)=>{
      if(res.data.code == 0){
         res.data.asg.map((item) => {
           return item.num = 0
         })
        this.data = res.data.asg
      }
    })
  },
  methods:{
    next(item){
      let index = this.data.findIndex((ele) => {
        return ele.id == item.id
      })
      this.data[index].num++
    },
    prev(item){
      let index = this.data.findIndex((ele) => {
        return ele.id == item.id
      })
      this.data[index].num--
    }
  },
  computed:{
    aDouble(){
        let arr = []
        this.data.forEach(ele => {
          arr.push(ele.num)
        })
      return arr.reduce((prev,next) => {
          return prev + next
      },0)
    },
    totalPrice(){
      let arr = []
      this.data.forEach(ele => {
         arr.push(ele.num * ele.mony) 
      })
      return arr.reduce((prev,next) => {
          return prev + next
      },0)
    }
    
  }
}
</script>

<style>

</style>
